<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body onload="showProList()">
    请选择省份:<select id="pro">
      <option value="">--请选择省份--</option>
    </select>
  </body>
</html>
<script>
  var addressAy = [
    { proId: 'p1', proName: '安徽省' },
    { proId: 'p2', proName: '江苏省' },
    { proId: 'p3', proName: '浙江省' },
  ]
  // function showProList() {
  //   var selectComp = document.getElementById("pro")
  //   var strHTML = selectComp.innerHTML
  //   for(var i=0;i<addressAy.length;i++){
  //     strHTML += '<option value="'+addressAy[i].proId+'">'+addressAy[i].proName+'</option>'
  //     console.log("id:"+addressAy[i].proId+",名:"+addressAy[i].proName)
  //   }
  //   console.log(strHTML)
  //   selectComp.innerHTML = strHTML
  // }

  function showProList() {
    var selectComp = document.getElementById("pro")
    for(var i=0;i<addressAy.length;i++){
      //创建 <option>  param1 text  param2 value
      var option = new Option(addressAy[i].proName,addressAy[i].proId)
      console.log("id:"+addressAy[i].proId+",名:"+addressAy[i].proName)
      selectComp.add(option)
    }
  }
</script>
